<template>
	<div class="test">
		 <!--sql调试模态框-->
		<el-dialog title="添加转发数据" :visible.sync="addMode">
			 <el-form :model="addForm" :rules="rules" ref="addForm"  class="demo-ruleForm">
					<el-form-item label="选择操作" :label-width="formLabelWidth" prop="msg">
								<el-select v-model="addForm.msg" prop="msg" placeholder="请选择"  style="width:67%">
								<el-option label="转发至另外的TOPIC" value="转发至另外的TOPIC"></el-option>
								<el-option label="转发至MYSQL" value="转发至MYSQL"></el-option>
							</el-select>
						</el-form-item>
					 <el-form-item label="TOPIC" :label-width="formLabelWidth" prop="topic">
						<el-input v-model="addForm.topic" auto-complete="off" style="width:69%"></el-input>
					</el-form-item>
					<el-form-item label="MYSQL" :label-width="formLabelWidth" prop="mysql">
							<el-select v-model="addForm.mysql" prop="mysql" style="width:68%">
							<el-option label="mysql1" value="mysql1"></el-option>
							<el-option label="mysql2" value="mysql2"></el-option>
					</el-select>					  
				 </el-form-item>
				 <el-form-item label="TABLE" :label-width="formLabelWidth" prop="table">
					<el-select v-model="addForm.table" prop="table" style="width:69%">
							<el-option label="table1" value="table1"></el-option>
							<el-option label="table2" value="table2"></el-option>
					</el-select>
				 </el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
					<el-button @click="addMode=false">取 消</el-button>
					<el-button type="primary"  @click="submitform('addForm')">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import bus from '../../eventBus.js'
// import {  removeUser, batchRemoveUser, editUser, addUser } from '../../api/fictitious.js';
export default{
	name:'addMode',
	data(){
		return{
			addMode:false,
			formLabelWidth:'150',
			addForm:{
				biao:'转发数据',
				msg:'',
				topic:'',
				mysql:'',
				table:''
			},
			rules:{
				msg:[
					{required:true,message:'请选择操作',trigger:'change'}
				],
				topic:[
					{required:true,message:'话题不能为空',trigger:'blur'}
				],
				mysql:[
					{required:true,message:'请选择数据库',trigger:'change'}
				],
				table:[
					{required:true,message:'请选择表格',trigger:'change'}
				]
			}
		}
	},
	methods:{
		submitform(formName){
			this.$refs[formName].validate((valid) => {
				if (valid) {
					console.log(this.addForm);
					let para = Object.assign({}, this.addForm);	
					console.log(para);
					addUser(para).then(() => {
						this.$message({
							message: '提交成功',
							type: 'success'
						});
						this.$refs['addForm'].resetFields();
						this.addMode = false;
						bus.$emit("addMode",111);				
					});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		}
	},
	mounted(){
		var self=this;
		bus.$on("addInfo",function (msg) {
			self.addMode=msg;
		});
	}
}

</script>


<style>


</style>